<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.9.16/dist/css/layui.css" rel="stylesheet">
    <script src="/view/js/jquery.js"></script>
</head>
<body>
<form class="layui-form layui-row layui-col-space16">
    <div style="width: 100%">
        <div style="width: 20% ;display: inline-block" class="layui-col-md4">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-username"></i>
                </div>
                <input   type="text" name="realname" value="" placeholder="姓名" class="layui-input" lay-affix="clear">
            </div>
        </div>
        <div  style="width: 20% ;display: inline-block"  class="layui-col-md4">
            <div class="layui-input-wrap">
                <input  type="text" name="cname" placeholder="班级" lay-affix="clear" class="layui-input">
            </div>
        </div>
        <div   style="width: 20% ;display: inline-block" class="layui-col-md4">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-date"></i>
                </div>
                <input  type="text" name="C" readonly placeholder="预留字段:    日期" class="layui-input demo-table-search-date">
            </div>
        </div>
        <div style="width: 30% ;display: inline-block" >
                <div class="layui-btn-container layui-col-xs12">
                    <button style="width: 30%" class="layui-btn" lay-submit lay-filter="demo-table-search">Search</button>
                    <button style="width: 30%" type="reset" class="layui-btn layui-btn-primary">Clear</button>
                </div>
        </div>
    </div>

</form>
<table class="layui-hide" id="ID-table-demo-search">

</table>

<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="//unpkg.com/layui@2.9.16/dist/layui.js"></script>
<script>
    layui.use(function(){
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        // 创建表格实例
        table.render({
            elem: '#ID-table-demo-search',
            url: 'http://localhost:8080/studentManagement', // 此处为静态模拟数据，实际使用时需换成真实接口
            cols: [
                [
                {type: 'radio', title: '😊', fixed: true}, // 单选框
                {field:'uid', title: 'ID', width:60, sort: true, fixed: true},
                {field:'username', title: '用户名', width:80},
                {field:'gender', title: '性别', width:60},
                {field:'age', title: '年龄', width:60},
                {field:'email', title: '邮箱'},
                {field:'phone', title: '电话', sort: true, width:80},
                    {field:'realname', title: '姓名', width:60},
                    {field:'address', title: '地址', width:60},
                    {field:'money', title: '期望薪资', width:90},
                    {field:'workposition', title: '工作地点', width:90},
                    {field:'education', title: '学历', width:60},
                    {field:'school', title: '毕业院校', width:90},
                    {field:'status', title: '状态', width:60}
            ]
            ],
            page: true,
            height: 500,
            response:{
                statusName:'code', //规定返回的状态码字段为code
                statusCode:200 //规定成功的状态码味200
            },
            parseData:function(res){
                return {
                    "code" : res.code, //解析接口状态
                    "msg" : res.msg, //解析提示文本
                    "data" : res.data //解析数据列表
                }
            }
        });
        // 日期
        laydate.render({
            elem: '.demo-table-search-date'
        });
        // 搜索提交
        form.on('submit(demo-table-search)', function(data){
            var field = data.field; // 获得表单字段
            // 执行搜索重载
            table.reload('ID-table-demo-search', {
                page: {
                    curr: 1 // 重新从第 1 页开始
                },
                where: field // 搜索的字段
            });
            layer.msg('搜索成功<br>此处为静态模拟数据，实际使用时换成真实接口即可');
            return false; // 阻止默认 form 跳转
        });
    });
    $(()=>{
        $.ajax({
            url:"/studentManagement",
            type:'GET',
            contentType:'application/json',
            success:function(resp){
              console.log(resp)

            },
            error:function(resp){
                alert(resp)
            }
        })
    })

</script>

</body>
</html>